<template>
  <div class="content">
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
    <div class="top">
      <div class="address" @click="address()" v-if="show">
        <img class="ico" src="./ico@1x.png" alt="">
        <span>请添加收货地址</span>
        <div class="mint-field-other">&gt;</div>
      </div>
      <div class="Top" @click="address()" v-else>
        <div class="left">
          <div class="name">
            {{addr.userName+'&nbsp;&nbsp;&nbsp;'+addr.phoneNumber}}
          </div>
          <div class="dizhi">
            <img src="../../assets/images/address.png" alt="">
            <span>{{addr.address+'/'+addr.street}}</span>
          </div>
        </div>
        <div class="right">&gt;</div>

      </div>
      <img src="./pic@1x.png" class="borderLine" alt="">
    </div>

    <div class="goods">
      <div class="goods-top">
        <div class="img">
          <img :src=goodsInfo.mallImg alt="">
        </div>
        <div class="text">
          <p>{{goodsInfo.mallName}}</p>
          <p>已选择:{{goodsInfo.specName}}</p>
          <p>&yen{{goodsInfo.price / 100}}</p>
        </div>
      </div>
      <div class="num">
        <p>数量</p>
        <div class="numbers">
          <img class="sub" src="./_@1x.png" alt="" v-on:click="sub">
          <div class="number" v-model="isNum">{{isNum}}</div>
          <img class="add" src="./+@1x.png" alt="" v-on:click="add">
        </div>
      </div>
      <div class="freight">
        <div>
          <span>运费</span>
          <b>包邮</b>
        </div>
      </div>
      <div class="subTotal">
        <div>
          <span>共计 {{isNum}} 件商品</span>
          <span>小计: &yen <span class="price">{{(goodsInfo.price / 100) * isNum}}</span></span>
        </div>
      </div>
    </div>
    <footer>
      <div class="foot">
        <div>实际支付：&yen{{(goodsInfo.price / 100) * isNum}}</div>
        <div @click="yanz()" class="que">确认支付</div>
      </div>
    </footer>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {
    wxHttpTool,
    wx_config,
    http_getParam,
    get_shopQrcoe,
    wx_share,
    wx_hideAllMenu
  } from '../../components/httpUtil/httpUtil'
  import {msg_10046} from '../../message/msg_10046'
  /* eslint-disable semi */
  import {relogin} from "../../components/httpUtil/httpUtil";

  export default {
    name: 'Exchange',
    data() {
      return {
        isNum: JSON.parse(localStorage.getItem('goodsInfo1021')).isNum,
        show: true,
        addr: {},
        showAlert: false,
        alertText: null,
        href: "",
        // http://www.yihangyoupin.com/wxPayTest?userId=10021&mallId=1&money=1type=0&mallSpecificationsId=1&buyNumber=4
      }
    },
    methods: {
      go() {
        this.showAlert = false
      },
      alertTip(msg) {
        this.showAlert = true;
        this.alertText = msg;
      },
      getData() {
        const jsonValue = JSON.stringify({
          'c': '10025',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id, // 用户ID
//            'userId': 1009, // 用户ID
            'tokenId': token()
          }
        });
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          const data = res.data.p;
          console.log(data);
          if (data.isTrue === true) {
            for (let i = 0; i < data.address.length; i++) {
              if (data.address[i].isUsing === 1) {
                // 默认地址
                this.show = false;
                this.addr = data.address[i];
                window.localStorage.uaId = this.addr.id
              } else {
                this.show = true;
              }
            }
          } else {
            this.alertTip(data.errorMsg);
            this.go = () => {
              this.showAlert = false;
              let _this = this
              relogin(_this)
            }
          }
        }, (res) => {
          this.alertTip('网络错误');
        })
      },
      address() {
        window.localStorage.historyUrl = window.location.href;
        this.$router.push('/addressManage')
      },
      yanz() {
        if (this.show) {
          this.alertTip("请添加收货地址");
        }
        else {
          if (window.localStorage.gpId) {
            window.location.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=${window.localStorage.mallId}&money=${this.goodsInfo.price * this.isNum}&payType=1&mallSpecificationsId=${ window.localStorage.msId}&buyNumber=${this.isNum}&gpId=${window.localStorage.gpId}&shopId=${window.localStorage.shopId}&uaId=${window.localStorage.uaId}`
          }
          else {
            window.location.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=${window.localStorage.mallId}&money=${this.goodsInfo.price * this.isNum}&payType=0&mallSpecificationsId=${ window.localStorage.msId}&buyNumber=${this.isNum}&shopId=${window.localStorage.shopId}&uaId=${window.localStorage.uaId}`
          }
          /*if (this.show) {
            this.alertTip("请添加收货地址");
          }
          else {
            if (window.localStorage.gpId) {
              window.location.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=${window.localStorage.mallId}&money=${this.goodsInfo.price * this.isNum}&payType=1&mallSpecificationsId=${ window.localStorage.msId}&buyNumber=${this.isNum}&gpId=${window.localStorage.gpId}&shopId=${window.localStorage.shopId}&uaId=${window.localStorage.uaId}`
            }
            else {
              window.location.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=${window.localStorage.mallId}&money=${this.goodsInfo.price * this.isNum}&payType=0&mallSpecificationsId=${ window.localStorage.msId}&buyNumber=${this.isNum}&gpId=${window.localStorage.gpId}&shopId=${window.localStorage.shopId}&uaId=${window.localStorage.uaId}`
            }
          }*/
        }
      },
      sub() {
        this.isNum--;
        if (this.isNum <= 0) {
          this.alertTip('数值不可以小于0');
          this.isNum = 0;
        }
      },
      add() {
        this.isNum++;
      },
//      pay () {
//        this.$router.push('/pinDanDetails')
//      }
    },
    created() {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis, msg_10046.entity(), function (varThis, res) {
          varThis.wxlist = res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline", "menuItem:share:QZone", "menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      }, this.type)
      this.goodsInfo = JSON.parse(localStorage.getItem('goodsInfo1021'))
      if (JSON.stringify(this.$route.params.addr) !== undefined) {
        this.show = false;
        this.addr = this.$route.params.addr;
        window.localStorage.uaId = this.addr.id
      } else {
        this.getData();
      }
    }
    /*   updated(){
     if(window.localStorage.gpId){
     window.location.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=&money=${this.goodsInfo.price*this.isNum}&payType=1&mallSpecificationsId=${window.localStorage.msId}&buyNumber=${this.isNum}&gpId=${this.goodsInfo.gpId}`
     }
     else {
     window.location.href = `http://www.yihangyoupin.com/wxPayTest?userId=${this.goodsInfo.userId}&mallId=&money=${this.goodsInfo.price*this.isNum}&payType=0&mallSpecificationsId=${window.localStorage.msId}&buyNumber=${this.isNum}`
     }
     }*/
  }
</script>

<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
    .top {
      background: #fff6f4;
      /*height: 120px;*/
      margin-bottom: 20px;
      .address {
        height: 112px;
        .ico {
          width: 35px;
          height: 35px;
          margin-top: 40px;
          margin-left: 30px;
          float: left;
        }
        span {
          float: left;
          font-size: 28px;
          color: #3b3b43;
          margin-top: 40px;
          margin-left: 14px;
        }
        .mint-field-other {
          width: 40px;
          /*height: 40px;*/
          float: right;
          text-align: center;
          line-height: 112px;
          color: #C0BCBA;
          font-size: 30px;
        }
      }
      .Top {
        height: 160px;
        box-sizing: border-box;
        padding-top: 20px;
        font-size: 28px;
        color: #3b3b43;
        border-bottom: 1px solid #dcdcdc;
        .left {
          height: 40px;
          float: left;
          padding-left: 50px;
          .name {
            font-weight: bold;
          }
          .dizhi {
            font-size: 26px;
            /*color: #a1a1a1;*/
            /*float: left;*/
            padding-top: 20px;
            img{
              width: 50px;
              height: 50px;
              padding-right: 10px;
              vertical-align: middle;
            }
            span{
              width: 430px;
              display: inline-block;
              vertical-align: middle;
              word-wrap:break-word;
              word-break:break-all;
              color: #949493;
            }
          }
        }
        .right{
          color: #ccc;
          float: right;
          font-size: 40px;
          vertical-align: middle;
          margin: 30px 40px 0 0;
        }
      }
      .borderLine {
        /*font-size: 0;*/
        height: 8px;
      }
    }
    .goods {
      background: #ffffff;
      .goods-top {
        box-sizing: border-box;
        height: 224px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        padding: 33px 30px 0px 30px;
        .img {
          width: 146px;
          height: 146px;
          background: #009dda;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          flex: 1;
          padding-left: 20px;
          font-size: 28px;
          p:nth-child(1) {
            color: #3b3b43;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p:nth-child(2) {
            font-size: 24px;
            color: #a1a1a1;
            padding: 10px 0 14px;
          }
          p:nth-child(3) {
            color: #fd4c2e;
          }
        }
      }
      .num {
        height: 110px;
        border-top: 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        padding-left: 34px;
        padding-right: 19px;
        p {
          font-size: 28px;
          color: #3b3b43;
          line-height: 112px;
        }
        .numbers {
          margin-top: 25px;
          display: flex;
          line-height: 112px;
          flex-flow: row nowrap;
          justify-content: flex-start;
          img {
            width: 68px;
            height: 60px;
          }
          .number {
            width: 160px;
            height: 64px;
            font-size: 20px;
            background: url("./btn@1x.png") no-repeat;
            background-size: 100%;
            text-align: center;
            line-height: 62px;
          }
        }
      }
      .freight {
        div {
          height: 92px;
          line-height: 92px;
          border-bottom: 1px solid #f4f4f4;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          padding-left: 32px;
          padding-right: 30px;
          span {
            font-size: 28px;
            color: #3b3b43;
          }
          b {
            font-weight: 400;
            font-size: 28px;
            color: #a1a1a1;
          }
        }
      }
      .subTotal {
        height: 92px;
        line-height: 92px;
        border-bottom: 1px solid #f4f4f4;
        div {
          float: right;
          margin-right: 30px;
          span {
            font-size: 28px;
            color: #3b3b43;
            margin-left: 30px;
            &.price {
              margin-left: 0;
              color: #fd4c2e;
            }
          }
        }
      }
    }
    footer {
      text-align: center;
      height: 100px;
      line-height: 100px;
      font-size: 28px;
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #ffffff;
      .foot {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        height: 100px;
        div:nth-child(1) {
          flex: 1.5;
          color: #fd4c2e;
        }
        .que {
          flex: 1;
          width: 288px;
          color: #ffffff;
          background: url("./btn_pay@1x.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
